<template>
  <div class="login-contain">
    <van-form>
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="primary" @click="login">提交</van-button>
      </div>
    </van-form>

    <div class="text" @click="$router.push('/register')">
      没有账号？立即注册
    </div>
  </div>
</template>

<script setup>
import { Toast } from "vant";
import { reqlogin } from "@/api";
import { useRouter, useRoute } from "vue-router";
const $router = useRouter();
const $route = useRoute();
// import { storeToRefs } from "pinia";
import useShopStore from "@/store/shop";
const shopStore = useShopStore();
// let { setToken } = storeToRefs(shopStore);
import { ref } from "vue";

const username = ref("");
const password = ref("");

const login = async () => {
  let data = await reqlogin({
    username: username.value,
    password: password.value,
  });
  let { status, message, token, refreshToken, userInfo } = data;
  Toast(message);
  if (!status) {
    shopStore.setToken(token);
    // setToken(token);
    shopStore.setRefreshToken(refreshToken);
    shopStore.setUserInfo(userInfo);
    let redirect = $route.query.redirect;
    $router.replace(redirect || "/home");
  }
};
</script>

<style lang="scss" scoped>
.login-contain {
  font-size: 14px;

  .text {
    font-size: 16px;
    color: #b9b5b5;
    text-align: center;
  }
}
</style>
